<template>
  <div class='chart-wrap'>
    <div  ref="chartRef" class="chart-content" v-show="chatDataX?.length"></div>
    <el-empty description="暂无数据" v-show="!chatDataX?.length"/>
  </div>
</template>

<script setup>
  import * as echarts from 'echarts';
  import { shopOperStatistic } from '@/api/bigData/shop'
  import {getChartOperateOption } from '../../echartOption'
import { ref } from 'vue';
  const { proxy } = getCurrentInstance();
  const props = defineProps({
   queryParams:{
      typeof: Object,
      default: () => {}
   }
  })
  let chatDataX = ref([])
  let echartsInstance = shallowRef(null);
  let chartRef = shallowRef();
  const initChart = (data)=>{
    const chatCustomer = data.map(ele => ele?.customerNum) || [];
    const chatOuter = data.map(ele => ele?.outerCustomerNum) || [];
    const chatVisitRatio= data.map(ele => ele?.visitRatio) || [];
    const chatPerCustTransaction = data.map(ele => ele?.perCustTransaction) || [];
    const chatSaleAmount = data.map(ele => ele?.saleAmount) || [];
    const chatOrderNum = data.map(ele => ele?.orderNum) || [];
    const chatSaleNum = data.map(ele => ele?.saleNum) || [];
    echartsInstance.value = null;
    echartsInstance.value = echarts.init(chartRef.value, null, {renderer:'svg'})
    const option = getChartOperateOption(chatDataX.value,chatCustomer,chatOuter,chatVisitRatio,chatPerCustTransaction,chatSaleAmount,chatOrderNum,chatSaleNum)
    echartsInstance.value.setOption(option,true)
    window.addEventListener('resize', resize);
  }

  const resize = () =>{
    if(!echartsInstance.value) return;
    echartsInstance.value?.resize()
  }

  onUnmounted(() => {
    // 组件卸载时销毁图表实例
    if(echartsInstance.value){
      echartsInstance.value.dispose();
    }
  });

  const getList = ()=>{
    proxy.$modal.loading("正在加载服务监控数据，请稍候！");
    const queryParams = toRaw({ ...props.queryParams});
    shopOperStatistic(queryParams).then(response => {
      const data = response?.data || [];
      if(queryParams?.type === "day"){
        chatDataX.value = data?.map(ele => ele?.visitTime) || [];
      }
      else if(queryParams?.type === "month"){
        chatDataX.value = data?.map(ele => ele?.visitDate) || [];
      }
      else if(queryParams?.type === "year"){
        chatDataX.value = data?.map(ele => ele?.visitMonth) || [];
      }
      nextTick(() => {
        initChart(data)
        resize()
      })
      proxy.$modal.closeLoading();
    }).catch(() => {
      proxy.$modal.closeLoading();
    });
  }
  defineExpose({getList})
</script>
<style lang="scss" scoped>
  .chart-wrap{
    width: 100%;
    height: calc(100% - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    .chart-content{
      width: 100%;
      height: 100%;
    }
  }
</style>
